<template>
  <!-- 评论弹出层 -->
  <div class="commentsWrapper">
    <van-popup
      v-model="isShow"
      closeable
      close-icon-position="top-right"
      position="bottom"
      @close="close()"
      :style="{ height: '30%' }"
    >
      <van-field
        v-model="message"
        rows="3"
        autosize
        type="textarea"
        maxlength="50"
        placeholder="请输入留言"
        show-word-limit
      />
      <van-button type="primary" @click="send()">发送</van-button>
    </van-popup>
  </div>
</template>

<script>
import { addComments } from '@/api/homepage/articleLists.js'
export default {
  data () {
    return {
      message: ''
    }
  },
  props: ['mycomment', 'artid', 'articleId', 'isShow2'],
  model: {
    prop: 'isShow2',
    event: 'change'
  },
  computed: {
    isShow: {
      get () {
        return this.isShow2
      },
      set () {
        this.$emit('change', false)
      }
    }
  },
  mounted () {},
  methods: {
    close () {
      this.$emit('change', false)
    },
    async send () {
      console.log(this.articleId)
      // 添加评论
      const params = {
        target: this.artid,
        content: this.message,
        aid: this.articleId ? this.articleId : null
      }
      const { data } = await addComments(params)
      this.$emit('sendcomment', data.data.new_obj)
      this.$emit('change', false)
      this.message = ''
    }
  }
}
</script>

<style lang="less" scoped>
.van-popup {
  display: flex;
  align-items: center;
  justify-content: center;
  .van-button {
    width: 180px;
  }
}
.van-field__control {
  margin-top: 60px;
}
</style>
